<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>瀑布流效果的实现-1</title>
<style>
* {margin: 0; padding: 0;}
#container { width: 1000px; border: 1px solid red; position: relative; margin: 50px auto 0; }
#container img { position: absolute; }

#loader { width: 100%; height: 60px; background: url('/Public/images/loader.gif') no-repeat center #FFF; position: fixed; bottom: 0; left: 0; display: none; }
</style>
<script src="/Public/js/jquery-1.11.3.js"></script>
<script>
/*
固定列：浮动布局
定位
*/
$(function() {
	var oContainer = $('#container');
	var oLoader = $('#loader');
	//总列数
	var iCells = 0;
	//计算列
	var iWidth = 200;  //列宽
	var iSpace = 10;   //间隔宽
	var iOuterWidth = iWidth + iSpace;  //列实际宽
	var sUrl = 'http://www.wookmark.com/api/json/popular?callback=?';
	var arrT = [];//存放的是每列top值
	var arrL = [];//存放的是每列left值
	var iPage = 0;
	var iBtn = true;//判断是否图片加载好
	
	//获取列数
	function setCell() {
		iCells = Math.floor($(window).innerWidth() / iOuterWidth);
		//限制列数
		if (iCells < 3) {
			//窗口变小后，显示固定个数，使得可以向右拖动
			iCells = 3;
		} else if (iCells > 6) {
			iCells = 6;
		}
		oContainer.css('width', iCells * iOuterWidth - iSpace);
	}
	setCell();
	
	//初始化存储的top_list和left_list
	for (var i=0; i<iCells; i++) {
		arrT[i] = 0;
		arrL[i] = iOuterWidth * i;//或者arrL[i].push(iOuterWidth * i)
	}


	function getData() {
		$('#loader').show();
		if (!iBtn) {
			return ;
		}
		iBtn = false;
		//获取图片数据
		$.getJSON(sUrl, {page:iPage}, function(jData) {
			for(var index in jData){
				obj = jData[index];
				var oImg = $('<img />');
				oImg.attr('src', obj.preview);
				//缩小的图片高度                                                                                                                                                                                                                                                                                                                                                                       
				var iHeight = obj.height * (iWidth / obj.width);
				//设置定位
				oImg.css({
					width	:	iWidth,                              
					height	:	iHeight,
				});
				//获取arrT最小值所在的位置
				var _index = getMin();
				console.log(index);
				
				//设置定位
				oImg.css({
					left	:	arrL[_index],                              
					top		:	arrT[_index],
				});
				//高度累加
				arrT[_index] += iHeight + 10;
				oContainer.append(oImg);
				//隐藏
				$('#loader').hide();
				iBtn = true;
				console.log(arrT);
			}		
		});
	}
	
	getData();

	//获取高度最小的索引
	function getMin() {
		var v = arrT[0];
		var _index = 0;
		
		for (var i=1; i<arrT.length; i++) {
			if (arrT[i] < v) {
				v = arrT[i];
				_index = i;
			}
		}
		return _index;
	}
//	
//	//alert(getMin());
//	
	//滚动事件
	$(window).on('scroll', function() {
		var _index =getMin();
		var iH = $(window).scrollTop() + $(window).innerHeight();//crollTop加上可视区高度
		document.title = iH + ':' + (arrT[_index] + 50);
		if (arrT[_index] + oContainer.offset().top < iH) {
			iPage ++;
			getData();
		}
	});
	
	$(window).on('resize', function() {
		//原来的猎术
		var iLen = iCells;
		setCell();
		if (iLen == iCells) {
			return ;
		}
		arrT = [];
		arrL = [];
		for (var i=0; i<iCells; i++) {
			arrT[i] = 0;
			arrL[i] = iOuterWidth * i;
		}
		
		oContainer.find('img').each(function() {
			var _index = getMin();
			/*$(this).css({
				left	:	arrL[_index],
				top		:	arrT[_index]
			});*/
			$(this).animate({
				left	:	arrL[_index],
				top		:	arrT[_index]
			}, 1000);
			arrT[_index] += $(this).height() + 10;
			
		});
	})
	
	
	
})
</script>
</head>

<body>
	<div id="container"></div>
    <div id="loader"></div>
</body>
</html>